객체지향을 위한 JS의 Prototype과 Prototype Link

Prototype은 어떻게 쓰이고 있을까

Prototype을 이용하면 JS에서도 상속을 구현할 수 있다.
그리고 우리는 Prototype을 이용한 문법들을 매일 쓰고 있다.

const arr = [1, 2, 3];
arr.map((i) => i + 1);

배열을 선언한 것 뿐인데, map이라는 메소드는 어떻게 사용할 수 있을까? prototype 덕분에 배열의 원형에 있는 map 메소드를 사용할 수 있기 때문이다.

그 연결들은 어떻게 구현되어 있는지 자세히 알아보자

Prototype Object

JS 함수는 객체이기 때문에 프로퍼티를 가질 수 있다. 그리고 모든 함수는 자신만의 Prototype Object가 생성된다.

함수는 prototype이라는 프로퍼티로 Prototype Object를 참조한다.
반대로 Prototype Object에서는 constructor라는 프로퍼티로 함수를 참조한다.

생성자 함수

함수를 new 키워드와 함께 호출하면, 그 함수는 생성자 함수가 되고
반환되는 것은 인스턴스가 된다

인스턴스가 생성될 때, 인스턴스의 proto 프로퍼티를 통해 Prototype Object를 참조한다.

이렇게 인스턴스, 원형, 프로토타입 객체가 서로 연결되어 있다.

Prototype Link

prototype link란 prototype chain이라고도 불린다. 스코프 체인의 원리와 비슷하다.

function Person(name) {
  this.name = name;
}

const kim = new Person('kim');
const lee = new Person('lee');

이런 상황이면, Prototype Link는 아래 사진처럼 구성된다.

prototype link

함수는 prototype이라는 프로퍼티로 Prototype Object를 참조한다.
반대로 Prototype Object에서는 constructor라는 프로퍼티로 함수를 참조한다.
인스턴스는 __proto__라는 프로퍼티로 Prototype Object를 참조한다.

Prototype으로 인스턴스끼리 메소드 공유하기

모든 인스턴스는 Prototype Object에 대한 참조를 가지고 있다.
그리고 JS엔진은 현재 인스턴스에서 메소드나 멤버변수를 찾지 못하면
Prototype Object에서 식별자를 찾게된다.

이를 이용해, 인스턴스끼리 메소드나 값을 공유할 수 있다.

function Person(name) {
  this.name = name;
}

const kim = new Person('kim');
const lee = new Person('lee');

// 1. __proto__로 프로토타입 오브젝트 접근
kim.__proto__.getName = function () {
  console.log(this.name);
};

// 2. prototype으로 프로토타입 오브젝트 접근
Person.prototype.consoleName = function () {
  console.log(this.name);
};

lee.getName(); // => lee가 출력됨

이렇게 __proto__로 Prototype Object에 새로운 getName 이라는 메소드를 추가하거나
이렇게 prototype으로 Prototype Object에 새로운 consoleName 이라는 메소드를 추가하거나

lee라는 인스턴스에서도 getName과 consoleName이라는 함수를 사용할 수 있게된다.

Prototyle Link로 상속 만들기

객체지향에서는 상속이란 개념이 있다. JS는 Prototype을 이용해서 어떻게 상속을 구현했을까

function First(v) {
  this.first = 'first';
}
function Second() {
  this.second = 'second';
}
function Third() {
  this.third = 'third';
}

First.prototype.get = function () {
  console.log(this.first, this.second, this.third);
};

Second.prototype = new First();
Third.prototype = new Second();

var obj = new Third();

Second.prototype 의 참조 대상을 First형 객체로 바꿔치기 했다.
Third.prototype 의 참조 대상을 Second형 객체로 바꿔치기 했다.
obj가 실제적으로 들고 있는 프로퍼티는 third뿐이지만,
마치 부모 클래스가 있는 것 처럼, second와 first 속성을 갖게 된다.(스코프 체인에 의하여)

이런 방식으로 상속을 구현한다.

Class 상속과 다른 점은, 상속에서 부모 클래스의 프로퍼티들을 "복사하지 않는 것이다."
프로토타입 체인만을 이용하여, 내 것처럼 사용할 수 있게 되는 것이다. 스코프 체인과 동작 원리가 같다.